<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              产品款号
              <el-tooltip
                :content="'产品款号'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{ itemData.spu ? itemData.spu : "未更新" }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              颜色
              <el-tooltip :content="'颜色'" effect="light" placement="bottom">
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{ itemData.colorProperty ? itemData.colorProperty : "未更新" }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              此次采购单价
              <el-tooltip
                :content="'此次采购单价'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{ itemData.purchasePrice ? itemData.purchasePrice : "未更新" }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="visibility: hidden">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              此次采购单价
              <el-tooltip
                :content="'此次采购单价'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{ itemData.purchasePrice ? itemData.purchasePrice : "未更新" }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              历史最高单价
              <span
                @click="handleSetLineChartData(itemData.maxPurchasePrice)"
                style="
                  color: rgb(37, 137, 255);
                  cursor: pointer;
                  text-decoration: underline;
                  font-size: 10px;
                "
                >查看</span
              >
              <!-- <el-tooltip
                :content="'历史最高单价'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip> -->
            </div>

            <div class="card-panel-num">
              {{
                itemData.maxPurchasePrice ? itemData.maxPurchasePrice : "未更新"
              }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              历史最低单价
              <span
                @click="handleSetLineChartData(itemData.minPurchasePrice)"
                style="
                  color: rgb(37, 137, 255);
                  cursor: pointer;
                  text-decoration: underline;
                  font-size: 10px;
                "
                >查看</span
              >
            </div>

            <div class="card-panel-num">
              {{
                itemData.minPurchasePrice ? itemData.minPurchasePrice : "未更新"
              }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              近6个月最高单价
              <el-tooltip
                :content="'近6个月最高单价'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{
                itemData.sixMonthPriceMax ? itemData.sixMonthPriceMax : "未更新"
              }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              平均采购单价
              <el-tooltip
                :content="'平均采购单价'"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>

            <div class="card-panel-num">
              {{
                itemData.avgPurchasePrice ? itemData.avgPurchasePrice : "未更新"
              }}
            </div>
          </div>
          <div class="card-panel-right" style="display: none"></div>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="关联采购单信息"
      :visible.sync="isOpen"
      width="80%"
      v-if="isOpen"
    >
      <el-row class="mb8" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handlePurchaseExport"
            >导出
          </el-button>
        </el-col>
        <!-- <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar> -->
      </el-row>
      <el-table :data="PurchaseBasicsDwdList" :height="600">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column label="id" align="center" prop="id" /> -->
        <el-table-column
          width="120"
          label="下单日期"
          align="center"
          prop="dataDate"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dataDate, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brand" />
        <el-table-column label="供应商" align="center" prop="supplier" />
        <el-table-column
          width="120"
          label="合同号"
          align="center"
          prop="contractNumber"
        />
        <el-table-column label="货号" align="center" prop="spu" />
        <el-table-column label="颜色" align="center" prop="colorProperty" />
        <el-table-column
          label="采购单号"
          align="center"
          prop="purchaseOrderNumber"
        />
        <el-table-column label="新品/老品" align="center" prop="isNewProduct" />
        <el-table-column label="下单数量" align="center" prop="orderQuantity" />
        <el-table-column
          label="合同采购价(元)"
          align="center"
          prop="contractPurchasePrice"
        />
        <el-table-column
          label="合同采购金额(元)"
          align="center"
          prop="contractAmount"
        />
        <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />

        <el-table-column
          label="单件附加费用(元)"
          align="center"
          prop="additionalCostPerUnit"
        />
        <el-table-column
          label="订单附加费用(元)"
          align="center"
          prop="orderAdditionalCost"
        />
        <el-table-column
          label="附加费用说明"
          align="center"
          prop="additionalCostDescription"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.additionalCostDescription"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.additionalCostDescription }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="成本裸价(元)（含税）"
          align="center"
          prop="costPriceIncludingTax"
        />
        <el-table-column
          width="150"
          label="成本裸价(元)(不含税)"
          align="center"
          prop="costPriceExcludingTax"
        />
        <el-table-column
          label="单件税金"
          align="center"
          prop="taxAmountPerUnit"
        />
        <el-table-column
          label="协议到货日期"
          align="center"
          prop="contractDeliveryDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="已入库数量"
          align="center"
          prop="quantityReceived"
        />
        <el-table-column
          width="150"
          label="是否准交"
          align="center"
          prop="isOverdue30Days"
        />
        <el-table-column
          label="协议日期内已交货数量"
          align="center"
          prop="overdueQuantity30Days"
        />
        <el-table-column
          label="是否有交货差异"
          align="center"
          prop="isOverOrder"
        />
        <el-table-column
          label="差异数量"
          align="center"
          prop="overOrderQuantity"
        />
        <el-table-column label="款式备注" align="center" prop="colorremark" />
        <el-table-column label="采购备注" align="center" prop="phaseremark" />
      </el-table>

      <pagination
        v-show="PurchaseBasicsDwdTotal > 0"
        :total="PurchaseBasicsDwdTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import {
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectConditionList,
  selectPurchaseMonth,
  selectPurchaseReturnVoList,
  selectPurchaseCost,
  selectPurchasePriceData,
  selectPurchasecostStatistics,
} from "@/api/purchase/PurchaseBasicsDwd";
export default {
  components: {
    CountTo,
  },
  model: {
    prop: "biNumberItem",
  },
  props: {
    biNumberItem: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      duration: 1000,
      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮
    };
  },
  methods: {
    handlePurchaseExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/voExport",
        {
          ...this.query,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },
    pageList() {
      this.query = {
        skc: this.itemData.skc,
        colorProperty: this.itemData.colorProperty,
        supplier: this.itemData.supplier,
        contractPurchasePrice: type,
        ...this.pageReq,
      };
      selectConditionList(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
    },
    handleSetLineChartData(type) {
      if (!type) {
        this.$modal.msgError("请选择一条数据");
        return;
      }
      this.query = {
        skc: this.itemData.skc,
        colorProperty: this.itemData.colorProperty,
        supplier: this.itemData.supplier,
        contractPurchasePrice: type,
        ...this.pageReq,
      };

      selectConditionList(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
      this.isOpen = true;
      return;
      // const m = ["messages", "shoppings"]
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      // this.$emit("handleSetLineChartData", type);
    },
  },
};
</script>

<style lang="scss">
.el-carousel__indicator--horizontal {
  display: none;
}

.highlight {
  border-top: 5px solid #36a3f7;
}

i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}

i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

//上三角
.increase {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  margin: 0 0 3px 5px;
}

//下三角
.decrease {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  border-style: solid;
  margin: 3px 0 0 5px;
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    // border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: left;

      font-weight: bold;
      margin: 26px;
      margin-left: 10px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }

    .card-panel-right {
      float: right;
      // text-align: center;
      font-weight: bold;
      margin: 26px;
      margin-right: 10px;

      .flex {
        display: flex;
      }

      .card-panel-text {
        text-align: center;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
